<template>
	<div class="image-list table-theme">
		<head-title title="运营--图片列表"></head-title>
		<el-card>
			<div class="top-menu">
				<div class="menu-left">
					<select-view
						:option-list="statusList"
						:value="status"
						placeholder="类型"
						type="status"
						@value="setSelectValue"
					>
					</select-view>
					<select-view
						:option-list="ascList"
						:value="asc"
						placeholder="排序"
						type="asc"
						@value="setSelectValue"
					>
					</select-view>
				</div>

				<div class="menu-right">
					<refresh-button @refresh="refreshPage"></refresh-button>
					<search-view :option="searchOption" @value="goSearch" @clear="refreshPage" ></search-view>
					<div class="add"><el-button type="primary" @click="imageDialog = true">上传图片</el-button></div>
				</div>
			</div>
			<p class="data-number">总数据数：{{total}}</p>
			<el-table :data="list" border>
				<el-table-column label="序号" align="center" prop="image_id"></el-table-column>
				<el-table-column label="图片" align="center" width="80">
					<template slot-scope="scope">
						<ImgPopover :src="scope.row.image"></ImgPopover>
					</template>
				</el-table-column>
				<el-table-column label="图片链接" align="center">
					<template slot-scope="scope">
						<p style="cursor: pointer;" v-clipboard:copy="scope.row.image" v-clipboard:success="onCopy">{{ scope.row.image }}</p>
					</template>
				</el-table-column>
				<el-table-column label="添加时间" align="center" prop="add_time"></el-table-column>
				<el-table-column label="上下架" align="center">
					<template slot-scope="scope">
						<el-switch v-model="scope.row.status" :active-value="1" :inactive-value="2" @change="upDown($event, scope.row.image_id)"></el-switch>
					</template>
				</el-table-column>
			</el-table>
			<div class="pages"><el-pagination background layout="prev, pager, next, jumper" :total="total" @current-change="init" :current-page="page"></el-pagination></div>
		</el-card>

		<el-dialog title="上传图片" :visible.sync="imageDialog" center :modal-append-to-body="false" width="680px">
			<el-form :model="imageForm" :rules="imageFormRules" ref="imageForm" label-width="120px">
				<div class="image-up">
					<el-form-item label="上传图片:" class="upload-box" prop="logistics_img">
						<el-upload class="avatar-uploader" ref="upload" action="fakeaction" :show-file-list="false" :http-request=" function(res) { return upload(res); } " multipleaccept="image/*" > <img v-if="imageForm.image" :src="imageForm.image" class="avatar" />
							<i v-else class="el-icon-plus avatar-uploader-icon"></i>
						</el-upload>
						<el-button type="danger" size="small" @click="reset">重置</el-button>
						<div class="el-upload__tip">小于1MB</div>
					</el-form-item>
				</div>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="imageDialog = false">取 消</el-button>
				<el-button type="primary" @click="confirmClick('imageForm')">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
import ImgPopover from '@/components/ImgPopover';
import SelectView from "@/components/SelectView";
export default {
	components: {
		ImgPopover,
		SelectView
	},
	data() {
		return {
			imageUrl: '',
			imageDialog: false,
			imageForm: {
				image: ''
			},
			imageFormRules: {
				image: [{ required: true, message: '请上传图片' }]
			},
			list: [],
			total: 0,
			status: 1,
			asc: 2,
			statusList: [
				{
					value: 1,
					label: '上架'
				},
				{
					value: 2,
					label: '下架'
				}
			],
			ascList: [
				{
					value: 1,
					label: '升序'
				},
				{
					value: 2,
					label: '降序'
				}
			],
			page: 1,
			searchOption: [
				{
					value: 0,
					label: "序号",
				}
			],
			classSelect: 0,
			selectContent: "",
		};
	},
	methods: {
		// 初始化列表
		init(e) {
			this.page = e;
			let data = {
				page: e - 1 ? e - 1 : 0,
				limit: 10,
				order_by: 'add_time',
				status: this.status,
				asc: this.asc
			};

			if (this.classSelect == 0 && this.selectContent != '') {
				data.image_id = this.selectContent;
			}

			this.$http(this.$ApiList.ImageList, data).then(res => {
				this.list = res.datas;
				this.total = res.counts;
			});
		},
		// 上下架
		upDown(e, id) {
			let data = {
				image_id: id,
				status: e
			};
			this.$http(this.$ApiList.OutImage, data).then(res => {
				this.$layer.msg('操作成功');
				this.refreshPage();
			});
		},
		refreshPage() {
			this.page = 1;
			this.status = 1;
			this.selectContent = '';
			this.init();
		},
		// 搜素
		goSearch(classSelect, selectContent) {
			this.classSelect = classSelect;
			this.selectContent = selectContent;
			this.init();
		},
		upload(params) {
			const file = params.file,
				isJPGPNG = file.type === 'image/jpeg' || 'image/png',
				isLt1MB = file.size / 1024 <= 10240;
			if (!isJPGPNG) {
				this.$message.error('只能上传图片格式png、jpg!');
				return;
			}
			if (!isLt1MB) {
				this.$message.error('图片不能大于10M');
				return;
			}

			let image = new FormData();
			image.append('file[]', file);

			this.$http(this.$ApiList.publicUpload, image).then(res => {
				this.imageForm.image = res.datas[0];
			});
		},
		// 重置
		reset() {
			this.imageForm.image = '';
		},
		//提交
		confirmClick(formName) {
			this.$refs[formName].validate(valid => {
				if (valid) {
					this.$http(this.$ApiList.addImage, this.imageForm).then(res => {
						this.$layer.msg('提交成功');
						this.imageDialog = false;
						this.refreshPage();
						this.reset();
					});
				} else {
					this.$layer.msg('请填写完整信息后提交');
				}
			});
		},
		// 复制成功时的回调函数
		onCopy() {
			this.$message.success('内容已复制到剪切板！');
		},
		setSelectValue(obj){
				const{ type,value } = obj
				switch (type) {
					case 'status':
						this.status = value
						break;
					case 'asc':
						this.asc = value
						break
					default:
						break;
				}
				this.init()
			}
	},
	created() {
		this.init();
	}
};
</script>
<style lang="scss" >
.image-list {
	
}
</style>
